<template>
  <div class="common-container" style="min-height: calc(100vh - 60px)">
    <div class="common-content">
      <!-- 轮播图部分 -->
      <div class="carousel-section">
        <el-carousel height="450px" :interval="10000">
          <el-carousel-item v-for="item in carouselList" :key="item.id">
            <a :href="item.url" v-if="item.url" target="_blank" class="carousel-link">
              <img :src="item.img" :alt="item.title" class="carousel-image">
            </a>
            <img v-else :src="item.img" :alt="item.title" class="carousel-image">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 商品展示部分 -->
      <div class="goods-section">
        <el-row :gutter="10">
          <el-col :span="6" v-for="item in files" :key="item.id" class="goods-col">
            <div class="goods-card">
              <img :src="item.img" alt="" class="goods-image">
              <div class="goods-name">{{ item.goodsName }}</div>
              <div class="goods-actions">
                <el-button type="primary" @click="buyGoods(item)">购买</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      carouselList: [], // 轮播图列表，存储从后端获取的数据
      files: []
    }
  },
  created() {
    this.loadCarouselData();
    this.loadFilesData();
  },
  methods: {
    // 加载轮播图数据
    loadCarouselData() {
      this.request.get("/carousel/front/list").then(res => {
        if (res.code === 200 && res.data) {
          this.carouselList = res.data;
        }
      }).catch(error => {
        console.error('获取轮播图数据失败:', error);
      });
    },
    
    // 加载商品数据
    loadFilesData() {
      this.request.get("/goods/front/top8").then(res => {
        if (res.code === 200) {
          // 直接使用后台返回的数据，不做映射处理
          this.files = res.data || [];
        }
      }).catch(error => {
        console.error('获取商品数据失败:', error);
      });
    },
    
    // 购买商品处理函数
    buyGoods(item) {
      // 由于这是首页，我们这里只是简单地跳转到商品列表页或商品详情页
      // 实际应用中可能需要更复杂的处理逻辑
      this.$router.push('/front/goodsList');
    }
  }
}
</script>

<style scoped>
.common-container {
  padding: 0;
}

.common-content {
  margin-bottom: 20px;
}

.carousel-section {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.carousel-link {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.goods-col {
  margin-bottom: 10px;
}

.goods-card {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.goods-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.goods-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.goods-name {
  padding: 10px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-actions {
  padding: 10px;
  text-align: center;
}
</style>
